<template>
  <div class="cardContent">
    <el-card class="box-card" v-for="item in list">
      <CardCom :info="item"></CardCom>
    </el-card>

    <el-card :body-style="{ padding: '0px' }" class="left">
      <!-- 饼图 -->
      <Pie />
    </el-card>

    <el-card :body-style="{ padding: '0px' }" class="right">
      <!-- 柱状图 -->
      <Bar />
    </el-card>
    <el-card :body-style="{ padding: '0px' }" class="lineCard">
      <!-- 折线图 -->
      <Line />
    </el-card>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import CardCom from '../../components/Card/CardCom.vue';
import Pie from '../../components/Echarts/Pie.vue';
import Bar from '../../components/Echarts/Bar.vue';
import Line from '../../components/Echarts/Line.vue';

const list = ref([
  {
    "Title": "需求",
    "Icon": "List",
    "Count": 10
  },
  {
    "Title": "待接需求",
    "Icon": "Failed",
    "Count": 3
  },
  {
    "Title": "已接需求",
    "Icon": "Checked",
    "Count": 7
  },
  {
    "Title": "完工需求",
    "Icon": "BellFilled",
    "Count": 5
  },
  {
    "Title": "待完工需求",
    "Icon": "Platform",
    "Count": 2
  }
])
</script>

<style lang="scss" scoped>
.cardContent {
  width: 100%;
  margin: 0px auto;

  .box-card {
    float: left;
    width: 19%;
    margin-right: 5px;
    margin-bottom: 20px;
  }

  .left,
  .right {
    float: left;
    width: 48%;
    margin-bottom: 20px;
  }

  .lineCard {
    width: 97.5%;
  }

  .right {
    margin-left: 20px;
  }

}
</style>